Creating shapes - "rhombus"

                <div class="main-1">
                    <div class="container-1">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main-1 {display: flex;--s: 7vw;  /* size  */ --m: 0.2vw; --f: calc(var(--s) + 4 * var(--m));}
                    .container-1 {font-size: 0; /* disable white space between inline block element */}
                    .container-1 div{ width: var(--s); margin: var(--m);height: var(--s);  display: inline-block; font-size:initial; 
                        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: burlywood; 
                        margin-bottom: calc(var(--m) - var(--s)*0.5);} 
                    .container-1 div:nth-child(odd) {background:brown;}
                    .container-1::before { content: ""; width: calc(var(--s)/2 + var(--m)); float: left; height: 120%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>